<template>
    <div class="childrenBox cb-4">
        <div class="textA">
            <p>线上购物转化率</p>
            <a class="el-icon-setting"></a>
        </div>
        <div class="textB">
            <p>78%</p>
        </div>
        <div class="textC" id="testC">
        </div>
        <div class="textD">
            <div class="text-left"><p>周同比</p>
                <div class="t-1"></div>
                <p>12%</p></div>
            <div class="text-right"><p>日环比</p>
                <div class="t-2"></div>
                <p>11%</p></div>
        </div>
    </div>
</template>

<script>
    import {Bullet} from '@antv/g2plot';

    export default {
        name: "index",
        data() {
            return {}
        },
        created() {
        },

        methods: {

            /*初始化进度条*/
            initProgressBar() {
                const data = [
                    {
                        title: '',
                        ranges: [100],
                        measures: [78],
                        target: 85,
                    },
                ];

                const bulletPlot = new Bullet('testC', {
                    data,
                    measureField: 'measures',
                    rangeField: 'ranges',
                    targetField: 'target',
                    xField: 'title',
                    color: {
                        range: '#ffffff',
                        measure: '#20e824',
                        target: '#ffffff',
                    },
                });

                bulletPlot && bulletPlot.render();

            }
        },
        mounted() {
            this.initProgressBar()


        }

    }
</script>

<style scoped>
    p {
        padding: 0;
        margin: 0;
    }


    .childrenBox {
        flex: 1;
        background: #fff;
        height: 220px;
        width: 300px;
        margin: 25px;
    }

    .textA {
        display: flex;
        justify-content: space-between;
        margin: 15px;
        color: #8c8c8c;
    }

    .textA a {
        margin-top: 4px;
    }

    .textB {
        width: 100px;
        font-size: 35px;
        margin-left: 15px;
    }

    .textC {
        display: flex;
        justify-content: space-between;
        height: 60px;
        width: 300px;
        margin: 15px;
        border-bottom: 1px solid #b8ceef;
    }

    .text-left {
        display: flex;
        align-items: center;
    }

    .text-left .t-1 {
        border: 1px solid #42b983;
        width: 5px;
        height: 5px;
        margin: 10px;
    }

    .text-right {
        display: flex;
        align-items: center;

    }

    .text-right .t-2 {
        border: 1px solid #e97a7a;
        width: 5px;
        height: 5px;
        margin: 10px;
    }

    .textD p {
        display: flex;
        margin-left: 15px;
    }

    .cb-4 .textD {
        display: flex;
    }
</style>
